<template>
    <div class="container">
        <!--头部-->
        <div class="top">
            <div class="left">
                <a @click="routerback"><img src="../assets/img/back.png"><span>返回</span></a>
            </div>
            <div class="right">
                <span class="name"></span>
            </div>
            <div class="right">
                <router-link to="/index"><span>书城</span><img src="../assets/img/home.png"></router-link>
            </div>
        </div>
        <!--书籍图片，名称-->
        <div class="shu_state">
            <div class="tu">
                <img :src="thisBook.ImageUrl ? thisBook.ImageUrl : ''">
                <p>{{thisBook.Title}}</p>
            </div>
            <!--<div class="intro_bookarck" @click="shou_search()" v-if="show">加入书架</div>-->
            <div v-if="thisBook.Finished==2">
                <h4 class="h4_1">本书未完，作者还在努力码字中</h4>
                <h4 class="h4_2">敬请期待</h4>
            </div>
            <div v-else>
                <h4 class="h4_1">本书已完结</h4>
                <h4 class="h4_2">更多精彩小说等你看</h4>
            </div>
        </div>
        <div class="qita">
            <div class="tit">
                <span>作者推荐</span>
                <span class="huan" @click="next_serach">换一换</span>
            </div>
            <!--推荐书籍-->
            <div>
                <div class="intro">
                    <router-link :to="{path:'/book_details',query:{id:books.ID}}">
                        <div class="intro_tu">
                            <img :src="books.ImageUrl ? books.ImageUrl : ''">
                        </div>
                        <div class="intro_right">
                            <p class="intro_title">{{books.Title}}</p>
                            <p class="intro_intro">{{books.Description}}</p>
                            <span class="intro_fenlei">{{books.TagName}}</span>
                        </div>
                    </router-link>
                </div>
                <div class="content">
                    <div v-for="book in books2" :key="book.ID">
                        <router-link :to="{path:'/book_details',query:{id:book.ID}}">
                            <img :src="book.ImageUrl ? book.ImageUrl : ''">
                        </router-link>
                        <p>{{book.Title}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "end",
        data(){
            return{
                search: {
                    Id:this.$route.query.id,
                    offset:0,
                },
                thisBook:[],
                books:[],   // 显示的图书
                books2: [], // 显示的图书列表
                show:true,
            }
        },
        created: function() {
            this.start_search();
            this.this_book();
            this.set();
        },
        mounted(){
            // to, from, next,返回上一页回到顶部
            this.$router.afterEach(() => {
                window.scrollTo(0, 0)
            })
        },
        methods: {
            set:function(){
                this.$emit('set','hide')
            },
            //本书信息
            this_book:function(){
               this.$axios.get('/book-infos',{params:{BookIDs:[this.search.Id]}}).then(response=>{
                   this.thisBook=response.data.books[0]
               })
            },
            routerback: function () {
                this.$router.back(-1)
                window.scrollTo(0, 0)
            },
            // 推荐列表
            start_search: function() {
                this.$axios.get('/books',{params: {PtID:0,ForbidView:2,Finished:0,Sex:0,Limit:4,Offset:this.search.offset,Descending:false}}).then(response=>{
                    this.books = response.data.books[0];
                    this.books2=[]
                    for (let i=1,ln=response.data.books.length;i<ln;i++)
                        this.books2.push(response.data.books[i])
                    })
            },
            // shou_search: function() {
            //     let self = this;
            //     let url = login.host + "/bookmark?BookID="+self.search.Id;
            //     $.post(url)
            //     self.show = !self.show
            //     alert("添加成功!");
            // },
            // yinshou_search: function() {
            //     let self = this;
            //     let url = login.host + "/check-bookmark-exist?BookID="+self.search.Id;
            //     axios.get(url).then(response=>{
            //         if(response.data.exist==true){
            //             self.show = false;
            //         }
            //     })
            // },
            next_serach: function() {
                this.search.offset += 4;
                this.start_search();
            }
        }
    }
</script>

<style scoped>
    .container {
        background: white;
        margin-bottom: 0px;
        padding: 0px;
    }

    .top {
        margin-bottom: 15px;
        padding: 10px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        background: #ebebeb;
    }

    .left a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .right a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .left a,
    .right a {
        color: black;
        text-decoration: none;
    }

    .top img {
        width: 2rem;
    }

    .top span {
        font-size: 1.1rem;
    }

    .shu_state {
        text-align: center;
    }

    .shu_state img {
        width: 7.5rem;
        height: 10rem;
        border-radius: 5px;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }

    .shu_state h4 {
        color: #3688ff;
        margin: 5px 0px;
        font-size: 1.2rem;
    }

    .shu_state p {
        margin: 8px 0px;
    }

    .qita {
        margin-top: 20px;
        border-top: 10px solid #ededed;
    }
    .intro{
        padding-left: 20px;
    }
    .intro a {
        margin-top: 10px;
        display: flex;
        text-decoration: none;
        color: black;
    }
    .intro p{
        margin: 0px 0px 10px;
    }
    .intro img {
        width: 6rem;
        height: 8rem;
        border-radius: 6px;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }

    .intro_right {
        margin: 0px 15px;
    }

    .intro_title {
        font-size: 1.2rem;
    }

    .intro_writer {
        color: #c1c1c1;
        font-size: 10px;
    }

    .intro_intro {
        margin-top: 10px;
        color: #c1c1c1;
        font-size: 0.95rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .intro_fenlei {
        text-align: center;
        font-size: 0.9rem;
        color: #989898;
    }
    .intro_bookarck {
        margin: 10px auto;
        border: 1px solid #5b8fff;
        padding: 0px 2px;
        width: 5rem;
        text-align: center;
        font-size: 0.9rem;
        color: #5b8fff;
        border-radius: 4px;
    }
    .content {
         margin-top: 15px;
         padding: 15px 20px;
         display: flex;
         justify-content: space-between;
         border-top: 1px solid #DDDDDD;
     }
    .content div{
        width: 29%;
    }
    .content img {
        width: 100%;
        height: 9rem;
        border-radius: 5px;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }
    .content p {
        width: 100%;
        margin-top: 5px;
        font-size: 0.95rem;
    }
    .tit {
        display: flex;
        justify-content: space-between;
        padding: 18px;
        font-size: 1.1rem;
    }

    .huan {
        color: #3688ff;
    }
</style>
